*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #131a1c;
}
.loader{
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: xing 7.2s linear infinite;
}
@keyframes xing {
    0% { 
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}
.loader span{
    position: absolute;
    transform-origin: 150px;
    transform: translateX(-150px) rotate(calc(var(--i) * 30deg));
    filter: drop-shadow(0 0 5px rgb(0, 174, 255)) drop-shadow(0 0 15px #3cc2ff) drop-shadow(0 0 30px #3cc2ff);
}
.loader span i{
    color: #3cc2ff;
    animation: rotate-stars 2.4s linear infinite;
    animation-delay: calc(var(--i)*-0.2s);
}
@keyframes rotate-stars {
    0% {
        transform: rotate(0deg) scale(0);
    }

    50% {
        transform: rotate(180deg) scale(3);
    }

    100% {
        transform: rotate(360deg) scale(0);
    }
}

.loader span::before {
    content: '\f005';
    position: absolute;
    font-family: fontAwesome;
    font-size: 0.75em;
    color: #131a1c;
    animation: rotate-particle 2.4s linear infinite;
    animation-delay: calc(var(--i)*-0.2s);
}

@keyframes rotate-particle {
    0% {
        scale: 1;
        opacity: 0;
        rotate: 0deg;
    }

    50% {
        scale: 1;
        opacity: 1;
        rotate: 180deg;
    }

    100% {
        scale: 0;
        opacity: 0;
        rotate: 360deg;
        filter: drop-shadow(-150px 0 #3cc2ff) drop-shadow(150px 0 #3cc2ff) drop-shadow(0 150px #3cc2ff) drop-shadow(0 -150px #3cc2ff);
    }
}